<template>
    <div class="CarList">
        <div class="top">
            <el-form :model="searchForm" ref="searchForm">
                <div class="row">
                    <div class="col">
                        <el-form-item label-width="68px" label="车辆类型">
                            <el-select v-model="searchForm.truckTypeId" placeholder="请选择车辆类型">
                                <el-option
                                    v-for="item in truckTypeList"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </div>

                    <div class="col">
                        <el-form-item label-width="68px" label="车牌号码">
                            <el-input v-model="searchForm.licensePlate" placeholder="请输入车牌号码"></el-input>
                        </el-form-item>
                    </div>

                    <div class="col btn-col">
                        <el-button class="btn btn_search" type="primary" @click="render">搜索</el-button>
                        <el-button class="btn btn_reset" type="primary" @click="reset">重置</el-button>
                    </div>
                </div>
            </el-form>
        </div>

        <div class="center">
            <div @click="navSearch(9)" class="navBtn active">全部 <span>{{ total }}</span></div>
            <div @click="navSearch(1)" class="navBtn">可用 <span>{{ enableCount }}</span></div>
            <div @click="navSearch(0)" class="navBtn">停用 <span>{{ disableCount }}</span></div>
        </div>

        <div class="bottom">
            <el-button class="btn btn_add" type="primary" @click="add">新增车型</el-button>
            <template>
                <!--     show-overflow-tooltip  -->
                <el-table
                    stripe
                    :data="tableList"
                    style="width: 100%">
                    <el-table-column
                        type="index"
                        label="序号">
                    </el-table-column>
                    <el-table-column
                        min-width="100px"
                        prop="licensePlate"
                        label="车牌号码">
                    </el-table-column>
                    <el-table-column
                        prop="truckTypeName"
                        label="车辆类型">
                    </el-table-column>
                    <el-table-column
                        min-width="60px"
                        prop="driverNum"
                        label="司机数量">
                    </el-table-column>
                    <el-table-column
                        prop="workStatus"
                        label="车辆状态">
                        <template v-slot="scope">
                            <div :class="scope.row.workStatus === 1 ? 'status1' : 'status2'"></div>
                            <div>{{ scope.row.workStatus === 1 ? '启用' : '停用' }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="deviceGpsId"
                        label="GPS设备ID">
                    </el-table-column>
                    <el-table-column
                        min-width="50px"
                        prop="allowableLoad"
                        label="实载重量（吨）">
                    </el-table-column>
                    <el-table-column
                        min-width="50px"
                        prop="allowableVolume"
                        label="实载体积（m³）">
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        width="180">
                        <template v-slot="scope">
                            <el-button class="edit" type="text" size="small"
                                       @click="$router.push(`/car-management/list/${scope.row.id}`)">查看详情
                            </el-button>
                            <el-divider direction="vertical"/>
                            <el-button type="text" size="small" @click="enable(scope.row)"
                                       :class="scope.row.workStatus === 1 ? 'status2' : 'status1'">
                                {{ scope.row.workStatus === 1 ? '停用' : '启用' }}
                            </el-button>
                            <el-divider direction="vertical"/>
                            <el-button class="edit" type="text" size="small" @click="setDriver(scope.row.id)">配置司机
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="1"
                :page-sizes="[5, 10, 20, 50]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <el-dialog
            title="新增车辆"
            :visible.sync="showDialog"
            width="500px"
            :before-close="close">

            <el-form
                :model="form"
                ref="editForm"
                label-width="100px"
                :rules="rules">
                <el-form-item prop="truckTypeId" label="车辆类型">
                    <el-select v-model="form.truckTypeId" placeholder="请选择车辆类型">
                        <el-option
                            v-for="item in truckTypeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="licensePlate" label="车牌号码">
                    <el-input v-model="form.licensePlate" placeholder="请输入车牌号码"/>
                </el-form-item>
                <el-form-item prop="deviceGpsId" label="GPS设备ID">
                    <el-input v-model="form.deviceGpsId" placeholder="请输入GPS设备ID"/>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addCarItem, getCarList, getCarCount, carEnable, carDisable } from '@/api/car-management'

export default {
    name: 'CarList',
    created () {
        this.render()
        this.getCount()
    },
    mounted () {
        this.$store.commit('setPageLoading', false)
    },
    data () {
        return {
            showDialog: false,
            searchForm: {},
            form: {},
            rules: {
                truckTypeId: [
                    { required: true, message: '请选择车辆类型', trigger: 'blur' }
                ],
                licensePlate: [
                    { required: true, message: '请输入车牌号码', trigger: 'input' }
                ],
                deviceGpsId: [
                    { required: true, message: '请输入GPS设备ID', trigger: 'blur' }
                ]
            },
            truckTypeList: [
                { value: '1575066321985286145', label: '4.2米厢式货车' },
                { value: '1575257460197634049', label: '12.8米厢式货车' },
            ],
            tableList: [],
            page: 1,
            pageSize: 5,
            total: 0,
            enableCount: 0,
            disableCount: 0
        }
    },
    methods: {
        async render () {
            const res = await getCarList({
                ...this.searchForm,
                page: this.page,
                pageSize: this.pageSize
            })
            this.tableList = res.data.data.items
            this.total = +res.data.data.counts
        },
        async getCount () {
            const res = await getCarCount()
            this.disableCount = +res.data.data[35]
            this.enableCount = +res.data.data[0] + +res.data.data[1]
        },
        navSearch (status) {
            this.searchForm.workStatus = status
            if (status === 9) this.searchForm.workStatus = ''
            this.render()
        },
        reset () {
            this.searchForm = {}
            this.render()
        },
        close () {
            this.$refs.editForm.resetFields()
            this.showDialog = false
        },
        async add () {
            this.showDialog = true
        },
        async enable (row) {
            console.log(row)
            if (row.status === 1) {
                const res = await carDisable(row.id)
            } else {
                const res = await carEnable(row.id)
            }
        },
        async setDriver (id) {

        },
        submit () {
            this.$refs.editForm.validate(async valid => {
                if (valid) {
                    const res = await addCarItem(this.form)
                    if (res.data.msg === 'ok') this.$message.success('新增成功')
                    this.showDialog = false
                }
            })
        },
        sizeChange (val) {
            this.pageSize = val
            this.page = 1
            this.render()
        },
        currentChange (val) {
            this.page = val
            this.render()
        }
    }
}
</script>

<style scoped lang="scss">
.CarList {
    .top {
        background-color: white;
        border-radius: 5px;
        color: #2A2929;
        padding: 12px;
        margin: 12px 12px 24px;

        .row {
            display: flex;

            .col {
                padding: 0 20px;
                flex: 1;

                .btn {
                    width: 100px;
                    height: 40px;
                    font-size: 14px;
                    background: #FFEEEB;
                    border: 1px solid #F3917C;
                    color: #E15536;

                    &:hover {
                        background-color: #FFE2DD;
                    }
                }

                .btn_search {
                    color: white;
                    background: #E15536 !important;

                    &:hover {
                        background-color: #FF7C5F !important;
                    }
                }
            }

            .btn-col {
                display: flex;
                justify-content: right;
                align-items: center;
            }
        }

        ::v-deep .el-form-item {
            margin: 10px 0;

            .el-select {
                width: 100%;
            }

            .el-form-item__label {
                font-size: 14px;
                font-weight: bold;
                color: #2A2929;
            }

            .el-input__inner {
                text-overflow: ellipsis;
            }
        }
    }

    .center {
        background-color: white;
        border-radius: 5px;
        color: #2A2929;
        margin: 12px 12px 24px;
        display: flex;

        .navBtn {
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-radius: 5px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.15s;
            color: #606266;
        }

        .active {
            color: #E15536;
            background-color: #FFEEEB;
        }
    }

    .bottom {
        background-color: white;
        border-radius: 5px;
        color: #2A2929;
        padding: 24px;
        margin: 12px;

        .btn_add {
            color: white;
            background: #E15536 !important;
            margin-bottom: 24px;

            &:hover {
                background-color: #FF7C5F !important;
            }
        }

        ::v-deep .el-table {
            border-top: 1px solid #EBEEF5;
            border-left: 1px solid #EBEEF5;
            border-right: 1px solid #EBEEF5;
            margin-bottom: 24px;

            .el-table__body-wrapper {
                color: #2A2929;
                font-size: 13px;

                .cell {
                    white-space: nowrap;

                    .status1 {
                        color: #1DC779;
                    }

                    .status2 {
                        color: #E15536;
                    }
                }

                tbody tr td:nth-of-type(5) .cell {
                    display: flex;
                    align-items: center;

                    div:first-of-type {
                        width: 6px;
                        height: 6px;
                        border-radius: 3px;
                        margin-right: 6px;
                    }

                    .status1 {
                        color: #1DC779;
                        background-color: #1DC779;
                    }

                    .status2 {
                        color: #E15536;
                        background-color: #E15536;
                    }
                }
            }

            .edit {
                color: #419EFF;
            }

            thead tr th:nth-of-type(9) {
                text-align: center;
            }
        }
    }

    ::v-deep .el-dialog {
        border-radius: 8px;

        .el-select {
            width: 100%;
        }
    }
}
</style>
